<template>
  <div class="con">
    <div class="pin" v-for="(v,index) in conList" :key="index" @click="handleClick(v.proid)">
        <img :src="v.img1" alt="">
        <p class="zi">{{ v.proname}}</p>
        <p class="zi1">￥{{ v.originprice}}</p>
      </div>
  </div>
</template>

<script>
import service from '../../../utils/service'
export default {
    name:'Content',
  data(){
    return{
      conList:null
       
    }
  },
  mounted(){
    service({
      url:"http://118.178.238.19:3001/api/pro/search",
      method:'get',
      data:{
        count:1,
        limitNum:10
      }
    }).then(res=>{
       console.log(res.data.data);
      this.conList=res.data.data
    })
  },
  methods:{
    handleClick(proid){
      //this.$router.push('/detail')
       this.$router.push({path:'/detail',query:{proid}},()=>{})
    }
  }
}
</script>

<style scoped>
.con{
    column-count: 2;
    margin: 10px;
}
.pin{
    background-color: white;
    margin-bottom: .625rem;
    border-radius: .625rem;
    break-inside: avoid;
}
.pin img{
    width: 100%;
    border-radius: .625rem;
}
.pin .zi{
    height: 26px;
    font-size: 12px;
    padding: 5px;
    /* text-overflow: -o-ellipsis-lastline; */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* line-clamp: 2; */
    -webkit-box-orient: vertical;
}
.pin .zi1{
    color: red;
    font-size: 18px;
}
</style>